<!DOCTYPE html>
<html lang="en" class="material-style layout-fixed layout-header-fixed ">

<head>
    <meta charset="UTF-8"/>
    <meta http-equiv="X-UA-Compatible" content="IE=edge"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
    <title>流程图</title>
    <link rel="stylesheet" href="/workflow/static/templates/zh_CN/static/fonts/iconfont.css"/>
    <link rel="stylesheet" href="/workflow/static/templates/zh_CN/static/css/font.css">
    <link rel="stylesheet" href="/workflow/static/templates/zh_CN/static/css/bootstrap-style.css">
    <link rel="stylesheet" href="/workflow/static/templates/zh_CN/static/css/style.css">
    <link rel="stylesheet" href="/workflow/static/templates/zh_CN/static/lib/toastr/toastr.css">
    <link rel="stylesheet" href="/workflow/static/templates/zh_CN/static/lib/select2/select2.css">

    <script src="/workflow/static/templates/zh_CN/static/js/x6.js"></script>
    <script src="/workflow/static/templates/zh_CN/static/js/jquery.min.js"></script>
    <script src="/workflow/static/templates/zh_CN/static/js/vendor.js"></script>
    <script src="/workflow/static/templates/zh_CN/static/lib/toastr/toastr.js"></script>
    <script src="/workflow/static/templates/zh_CN/static/lib/select2/select2.js"></script>
</head>

<body>
<div class="card">
    <div class=" d-flex flex-wrap justify-content-between align-items-center">

        <h6 class="card-header d-flex">
            <img class="chat-img" src="/workflow/static/templates/zh_CN/static/img/工作流程图.png">
            <div id="chat-title">流程图</div>

        </h6>
        <div class="mr-3">
            <div class="btn-group">
                <button type="button" class="btn btn-default dropdown-toggle" data-toggle="dropdown">流程版本</button>
                <div class="dropdown-menu">
                    <a class="dropdown-item" href="javascript:void(0)">流程版本V1</a>
                    <a class="dropdown-item" href="javascript:void(0)">流程版本V2</a>

                </div>
            </div>
            <button type="button" class="btn btn-outline-success px-4" onclick="previewSVG()">预览</button>

            <button type="button" class="btn btn-success px-4" onclick="holdJson()">保存</button>
        </div>
    </div>

</div>
<hr class="my-0">
<div class="header">
    <div>
        <button onclick="onUndo()" class="onUndo" title="撤回">
            <span class="iconfont icon-zuo"></span>
        </button>
        <button onclick="onRedo()" class="onRedo line-right" title="还原">
            <span class="iconfont icon-you"></span>
        </button>
        <button onclick="getJson()" data-toggle="modal" data-target="#getJsonModal" title="导出">
            <span class="iconfont icon-shangchuan"></span>
        </button>
        <button data-toggle="modal" class="line-right" data-target="#pushJsonModal" title="导入">
            <span class="iconfont icon-xiazai"></span>
        </button>
        <button onclick="boxSelection()" title="框选" id="box-Selection">
            <span class="iconfont icon-kuangxuan"></span>
        </button>
        <button class="newGroup btn-disabled" onclick="groupList()" title="新建群组">
            <span class="iconfont icon-qunzu"></span>
        </button>
        <button class="cancelGroup line-right" onclick="dissolutionGroup()" title="解散群组">
            <span class="iconfont icon-quxiaoqunzu"></span>
        </button>
        <button onclick="clearCell()" title="清空">
            <span class="iconfont icon-cachu"></span>
        </button>

        <!--        <button onclick="star()" class="line-right">闪烁</button>-->


        <button onclick="deleteNode()" class="deleteNode btn-disabled" title="删除">
            <span class="iconfont icon-shanchu"></span>
        </button>
        <!--        <button onclick="onRun()" title="运行">-->
        <!--            <span class="iconfont icon-yunhang"></span>-->
        <!--        </button>-->

    </div>
    <div>
        <button onclick="fullScreen()" class="full-screen" title="全屏">
            <span class="iconfont icon-quanping"></span>
        </button>
        <button onclick="exitScreen()" class="exit-screen hidden" title="取消全屏">
            <span class="iconfont icon-quxiaoquanping"></span>
        </button>
        <button onclick="openStow('icon-zuobian')" title="展开/收起左侧">
            <span class="iconfont icon-zuobian"></span>
        </button>
        <button onclick="openStow('icon-youbian1')" title="展开/收起右侧">
            <span class="iconfont icon-youbian1"></span>
        </button>
        <button onclick="openStow('icon-dibu2')" title="展开/收起底部">
            <span class="iconfont icon-dibu2"></span>
        </button>

    </div>

</div>
<div id="box">
    <div class="box-container">
        <div id="graph-container">
            <div class="blank-content">
                <div id="stencil" class>
                    <div class="zoom">
                        <div class="zoom-box iconfont icon-fangda line-bottom" onclick="enlarge()"></div>
                        <div class="zoom-box iconfont icon-dingwei line-bottom" onclick="intersect()"></div>
                        <div class="zoom-box iconfont icon-suoxiao" onclick="narrow()"></div>
                    </div>
                </div>
                <div class="bottom-list">
                    <div>列表名称</div>
                    <div class="form-row">
                        <div class="form-group row col-sm-4">
                            <!--                    <label class="col-form-label col-sm-3 text-sm-right">搜索</label>-->
                            <div class="col-sm-9">
                                <input type="text" class="form-control" placeholder="搜索框内容">
                                <div class="clearfix"></div>
                            </div>
                        </div>
                    </div>
                    <table class="table table-striped card-table">
                        <thead>
                        <tr>
                            <th>表头</th>
                            <th>表头</th>
                            <th>表头</th>
                            <th>表头</th>
                            <th>表头</th>
                            <th>表头</th>
                        </tr>
                        </thead>
                        <tbody>
                        <tr>
                            <th scope="row">1</th>
                            <td>Mark</td>
                            <td>Otto</td>
                            <td>@mdo</td>
                            <td>the Bird</td>
                            <td>@twitter</td>
                        </tr>
                        <tr>
                            <th scope="row">2</th>
                            <td>Jacob</td>
                            <td>Thornton</td>
                            <td>@fat</td>
                            <td>the Bird</td>
                            <td>@twitter</td>
                        </tr>
                        <tr>
                            <th scope="row">3</th>
                            <td>Larry</td>
                            <td>the Bird</td>
                            <td>@twitter</td>
                            <td>the Bird</td>
                            <td>@twitter</td>
                        </tr>
                        </tbody>
                    </table>
                </div>
                <div id="node-attribute" class="right-edit">
                    <div class="attribute-title">参数配置面板</div>
                    <div class="show-content hidden right-overflow">
                        <div class="parameter margin-bottom line-bottom">
                            <div class="title margin-bottom font-w">内容</div>
                            <div class="parameter-content margin-bottom">
                                <div class="fontsize">节点名称</div>
                                <input type="text" id="node-name" autocomplete="off"/>
                            </div>
                            <div class="parameter-content margin-bottom">
                                <div class="fontsize">节点类型</div>
                                <div class="fontsize" id="nodeType"></div>
                            </div>
                        </div>
                        <div class="style-content margin-bottom line-bottom">
                            <div class="margin-bottom font-w">样式</div>
                            <div class="place margin-bottom">
                                <div class="fontsize">位置</div>
                                <input type="number" id="node-x" autocomplete="off"/>
                                <input type="number" id="node-y" autocomplete="off"/>
                                <div class="x-text">X</div>
                                <div class="y-text">Y</div>
                            </div>
                            <div class="size margin-bottom">
                                <div class="fontsize">尺寸</div>
                                <input type="number" id="node-width" autocomplete="off"/>
                                <input type="number" id="node-height" autocomplete="off"/>
                                <div class="w-text">W</div>
                                <div class="h-text">H</div>
                            </div>
                        </div>
                        <div class="content-list margin-bottom line-bottom">
                            <div class="margin-bottom font-w ">类型</div>
                            <div class="item margin-bottom align-items-center">
                                <div class="fontsize">步骤类型</div>
                                <div class="fontsize">
                                    <label class="form-check">
                                        <input class="form-check-input" id="Radio1" type="radio" value="权限组"
                                               name="radios-example" >
                                        <span class="form-check-label">权限组</span>
                                    </label>
                                    <label class="form-check">
                                        <input class="form-check-input" id="Radio2" type="radio" value="固定审核人"
                                               name="radios-example">
                                        <span class="form-check-label">固定审核人</span>
                                    </label>
                                    <label class="form-check">
                                        <input class="form-check-input" id="Radio3" type="radio" value="自定义"
                                               name="radios-example" checked="checked">
                                        <span class="form-check-label">自定义</span>
                                    </label>
                                </div>
                            </div>
                            <!--  权限组  -->
                            <div class="form-group row align-items-center " id="Permission-group">
                                <label class="form-label col-sm-4 mb-0 ">权限组</label>
                                <div class="col-sm-8">
                                    <select class="form-control" name="validation-select2-multi" multiple>
                                    </select>
                                </div>
                            </div>
                            <!--  固定审核人  -->
                            <div id="Fixed-approver">
                                <div class="form-group row align-items-center">
                                    <label class="form-label col-sm-4 mb-0 ">我的领导</label>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" value="我的领导"
                                               name="validation-checkbox">
                                    </div>
                                </div>
                                <div class="form-group row align-items-center">
                                    <label class="form-label col-sm-4 mb-0 ">
                                        固定审核人
                                    </label>
                                    <div class="col-sm-8">
                                        <select class="form-control" name="validation-select2-multi-2" multiple>
                                        </select>
                                    </div>
                                </div>
                            </div>
                            <!--  自定义  -->
                            <div id="Customization">
                                <div class="form-group row align-items-center">
                                    <label class="form-label col-sm-4 mb-0 ">当前公司</label>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" value="当前公司"
                                               name="validation-checkbox">
                                    </div>
                                </div>
                                <div class="form-group row align-items-center">
                                    <label class="form-label col-sm-4 mb-0 ">当前部门</label>
                                    <div class="form-check">
                                        <input class="form-check-input" type="checkbox" value="当前部门"
                                               name="validation-checkbox">
                                    </div>
                                </div>
                                <div class="form-group row align-items-center">
                                    <label class="form-label col-sm-4 mb-0 ">角色</label>
                                    <div class="col-sm-8">
                                        <input class="form-control" type="text">
                                    </div>
                                </div>
                                <div class="form-group row align-items-center">
                                    <label class="form-label col-sm-4 mb-0 ">规则</label>
                                    <div class="col-sm-8">
                                        <input class="form-control" type="text">
                                    </div>
                                </div>
                            </div>
                            <div class="form-group row align-items-center">
                                <label class="form-label col-sm-4 mb-0 ">流程编号</label>
                                <div class="col-sm-8">
                                    <input class="form-control" type="text" id="Process-code">
                                </div>
                            </div>
                            <div class="form-group row align-items-center">
                                <label class="form-label col-sm-4 mb-0 ">按钮名称</label>
                                <div class="col-sm-8">
                                    <input class="form-control" type="text" id="button-name">
                                </div>
                            </div>
                            <div class="form-group row align-items-center">
                                <label class="form-label col-sm-4 mb-0 ">从状态</label>
                                <div class="col-sm-8">
                                    <input class="form-control" type="text" id="FromState">
                                </div>
                            </div>
                            <div class="form-group row align-items-center">
                                <label class="form-label col-sm-4 mb-0 ">到状态</label>
                                <div class="col-sm-8">
                                    <input class="form-control" type="text" id="toState">
                                </div>
                            </div>
                            <div class="form-group row align-items-center">
                                <label class="form-label col-sm-4 mb-0 ">下级状态</label>
                                <div class="col-sm-8">
                                    <input class="form-control" type="text" id="SubordinateStatus">
                                </div>
                            </div>
                            <div class="form-group row align-items-center">
                                <label class="form-label col-sm-4 mb-0 ">上级</label>
                                <div class="col-sm-8">
                                    <select class="form-control" id="superiorValue" onchange="getselect()">
                                        <option value="Select state">Select state</option>
                                        <option value="Select state">California</option>
                                        <option value="Select state">Hawaii</option>
                                        <option value="Select state">Florida</option>
                                        <option>Texas</option>
                                        <option>Massachusetts</option>
                                        <option>Alabama</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group row align-items-center">
                                <label class="form-label col-sm-4 mb-0 ">下级</label>
                                <div class="col-sm-8">
                                    <select class="form-control" id="lowerValue" onchange="getselect()">
                                        <option>Select state</option>
                                        <option>California</option>
                                        <option>Hawaii</option>
                                        <option>Florida</option>
                                        <option>Texas</option>
                                        <option>Massachusetts</option>
                                        <option>Alabama</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group row align-items-center">
                                <label class="form-label col-sm-4 mb-0 ">拒绝退回指定流程</label>
                                <div class="col-sm-8">
                                    <select class="form-control" id="refuseValue" onchange="getselect()">
                                        <option>Select state</option>
                                        <option>California</option>
                                        <option>Hawaii</option>
                                        <option>Florida</option>
                                        <option>Texas</option>
                                        <option>Massachusetts</option>
                                        <option>Alabama</option>
                                    </select>
                                </div>
                            </div>
                            <div class="form-group row align-items-center">
                                <label class="form-label col-sm-4 mb-0 ">拒绝状态</label>
                                <div class="col-sm-8">
                                    <input class="form-control" type="text" id="refuseStats">
                                </div>
                            </div>
                            <div class="form-group row align-items-center">
                                <label class="form-label col-sm-4 mb-0 ">隐藏选择人</label>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" value="隐藏选择人"
                                           name="validation-checkbox">
                                </div>
                            </div>
                            <div class="form-group row align-items-center">
                                <label class="form-label col-sm-4 mb-0 ">使用上次审核人</label>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" value="使用上次审核人"
                                           name="validation-checkbox">
                                </div>
                            </div>
                            <div class="form-group row align-items-center">
                                <label class="form-label col-sm-4 mb-0 ">停止工作流</label>
                                <div class="form-check">
                                    <input class="form-check-input" type="checkbox" value="停止工作流"
                                           name="validation-checkbox">
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="show-content-line line-hidden">
                        <div class="line-title margin-bottom">
                            <div>标题</div>
                            <input type="text" id="line-label" autocomplete="off"/>
                        </div>

                    </div>
                    <div class="none">
                        <div class="content-list margin-bottom line-bottom">
                            <div class="margin-bottom font-w">流程属性</div>
                            <div class="item margin-bottom">
                                <div class="fontsize">流程名称</div>

                                <input type="text" id="process-name">
                            </div>
                            <div class="item margin-bottom">
                                <div class="fontsize">表单地址</div>
                                <div class="fontsize"></div>
                            </div>
                            <div class="item margin-bottom">
                                <div class="fontsize">创建时间</div>
                                <div class="fontsize"></div>
                            </div>
                            <div class="item margin-bottom">
                                <div class="fontsize">创建人</div>

                                <input type="text" id="creat-personal">
                            </div>
                            <div class="item margin-bottom">
                                <div class="fontsize">修改时间</div>
                                <div class="fontsize"></div>
                            </div>
                            <div class="item margin-bottom">
                                <div class="fontsize">修改人</div>
                                <input type="text" id="edit-personal">
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>


        <!-- 导入 -->
        <div class="modal fade" id="pushJsonModal" tabindex="-1" aria-labelledby="ModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title title-flex" id="ModalLabel">
                            <div class="lnr lnr-calendar-full icon-purple"></div>
                            <div class="title-mar">导入数据</div>
                        </h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-dialog-bd">
                        <div class="card-body">
                            <textarea id="json-pushdata"></textarea>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">取消</button>
                        <button type="button" class="btn btn-primary" id="pushjson-btn" data-dismiss=""
                                onclick="pushJson()">确定
                        </button>
                    </div>
                </div>
            </div>
        </div>
        <!--导出 -->
        <div class="modal fade" id="getJsonModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title title-flex" id="exampleModalLabel">
                            <div class="lnr lnr-calendar-full icon-purple"></div>
                            <div class="title-mar">导出数据</div>
                        </h5>
                        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                            <span aria-hidden="true">&times;</span>
                        </button>
                    </div>
                    <div class="modal-dialog-bd">
                        <div class="card-body">
                            <textarea id="json-getdata"></textarea>

                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>

    let data = `{{object.data}}`.replace(/'/g, '"')
    let workflow_id = `{{object.workflow_id}}`.replace(/'/g, '"')
    let node_data
    let node_id = 0
    if (location.href.split('=')[2] === 'create') {
        localStorage.setItem("list", data);
        localStorage.setItem("workflow_id", workflow_id);
    }

    //底部表格宽度
    window.addEventListener('load', function () {
        document.getElementsByClassName('bottom-list')[0].style.width = window.outerWidth - document.getElementById('stencil').offsetWidth - document.getElementById('node-attribute').offsetWidth + 'px'
        window.addEventListener('resize', function () {
            document.getElementsByClassName('bottom-list')[0].style.width = window.outerWidth - document.getElementById('stencil').offsetWidth - document.getElementById('node-attribute').offsetWidth + 'px'
        })

    })
    window.addEventListener('resize', function () {
    })

    let new_cell = []
    let canUndo = false;
    let canRedo = false;
    // #region 初始化画布
    const graph = new X6.Graph({
        container: document.getElementById("graph-container"),
        autoResize: true, //是否监听容器大小改变，并自动更新画布大小
        panning: true,
        history: true,
        grid: true,
        selecting: {
            enabled: false,
            multiple: true, //多选
            rubberband: true,//启用框选
            movable: true, //移动
            // showNodeSelectionBox: true,
        },
        // interacting:{
        //     nodeMovable: false, //true为可拖拽，false不可拖拽
        // },

        connecting: {
            router: {
                name: "manhattan",
                args: {
                    padding: 1,
                },
            },
            connector: {
                name: "rounded",
                args: {
                    radius: 10,
                },
            },
            anchor: "center",
            connectionPoint: "anchor",
            allowBlank: false,
            snap: {
                radius: 20,
            },

            createEdge() {
                return new X6.Shape.Edge({
                    attrs: {
                        line: {
                            stroke: "#A2B1C3",
                            strokeWidth: 2,
                            targetMarker: {
                                name: "block",
                                width: 12,
                                height: 8,
                            },
                        },
                    },
                    zIndex: 1,
                });
            },
            validateConnection({targetMagnet}) {
                return !!targetMagnet;
            },
        },
        highlighting: {
            magnetAdsorbed: {
                name: "stroke",
                args: {
                    attrs: {
                        fill: "#fff",
                        stroke: "#E2E2E2",
                    },
                },
            },
        },
        resizing: true,
        rotating: true,
        snapline: true,
        keyboard: true,
        clipboard: true,
    });
    graph.drawBackground({
        color: "#fffef6",
    });

    // #region 初始化 stencil
    const stencil = new X6.Addon.Stencil({
        title: "流程图",
        target: graph,
        stencilGraphWidth: 280,
        stencilGraphHeight: 180,
        collapsable: true,
        groups: [
            {
                title: "基础流程图",
                name: "group1",
            },
        ],
        layoutOptions: {
            columns: 2,
            columnWidth: 130,
            rowHeight: 55,
        },
    });
    document.getElementById("stencil").appendChild(stencil.container);
    // #endregion

    //  #region 控制连接桩显示/隐藏
    const showPorts = (ports, show) => {
        for (let i = 0, len = ports.length; i < len; i = i + 1) {
            ports[i].style.visibility = show ? "visible" : "hidden";
        }
    };
    graph.on("node:mouseenter", () => {
        const container = document.getElementById("graph-container");
        const ports = container.querySelectorAll(".x6-port-body");
        showPorts(ports, true);
    });
    graph.on("node:mouseleave", () => {
        const container = document.getElementById("graph-container");
        const ports = container.querySelectorAll(".x6-port-body");
        showPorts(ports, false);
    });
    //禁用 stencil--Ports
    graph.on("node:mouseenter", () => {
        const stencil = document.getElementById("stencil");
        const ports = stencil.querySelectorAll(".x6-port-body");
        showPorts(ports, false);
    });
    graph.on("node:mouseleave", () => {
        const stencil = document.getElementById("stencil");
        const ports = stencil.querySelectorAll(".x6-port-body");
        showPorts(ports, false);
    });
    // #endregion

    // #region 初始化图形
    const ports = {
        groups: {
            top: {
                position: "top",
                attrs: {
                    circle: {
                        r: 4,
                        magnet: true,
                        stroke: "#5F95FF",
                        strokeWidth: 1,
                        fill: "#fff",
                        style: {
                            visibility: "hidden",
                        },
                    },
                },
            },
            right: {
                position: "right",
                attrs: {
                    circle: {
                        r: 4,
                        magnet: true,
                        stroke: "#5F95FF",
                        strokeWidth: 1,
                        fill: "#fff",
                        style: {
                            visibility: "hidden",
                        },
                    },
                },
            },
            bottom: {
                position: "bottom",
                attrs: {
                    circle: {
                        r: 4,
                        magnet: true,
                        stroke: "#5F95FF",
                        strokeWidth: 1,
                        fill: "#fff",
                        style: {
                            visibility: "hidden",
                        },
                    },
                },
            },
            left: {
                position: "left",
                attrs: {
                    circle: {
                        r: 4,
                        magnet: true,
                        stroke: "#5F95FF",
                        strokeWidth: 1,
                        fill: "#fff",
                        style: {
                            visibility: "hidden",
                        },
                    },
                },
            },
        },
        items: [
            {
                group: "top",
            },
            {
                group: "right",
            },
            {
                group: "bottom",
            },
            {
                group: "left",
            },
        ],
    };

    X6.Graph.registerNode(
        'custom-start',
        {
            inherit: "rect",
            width: 104,
            height: 24,
            markup: [
                {
                    tagName: "rect",
                    selector: "body",
                },
                {
                    tagName: "image",
                },
                {
                    tagName: "text",
                    selector: "label",
                },
            ],
            attrs: {
                body: {
                    stroke: "#E2E2E2",
                    fill: "#fff",
                },
                image: {
                    width: 16,
                    height: 16,
                    refX: 20,
                    refY: 4,
                    'xlink:href': '/workflow/static/templates/zh_CN/static/img/start.png',
                },
                label: {
                    refX: 40,
                    refY: 7,
                    textAnchor: "left",
                    textVerticalAnchor: "top",
                    fontSize: 12,
                    fill: "#fff",
                },
            },
            ports: {...ports},
        },
        true,
    )
    X6.Graph.registerNode(
        'custom-process',
        {
            inherit: "rect",
            width: 104,
            height: 24,
            markup: [
                {
                    tagName: "rect",
                    selector: "body",
                },
                {
                    tagName: "image",
                },
                {
                    tagName: "text",
                    selector: "label",
                },
            ],
            attrs: {
                body: {
                    stroke: "#E2E2E2",
                    fill: "#fff",
                },
                image: {
                    width: 16,
                    height: 16,
                    refX: 20,
                    refY: 4,
                    'xlink:href': '/workflow/static/templates/zh_CN/static/img/process.png',
                },
                label: {
                    refX: 40,
                    refY: 7,
                    textAnchor: "left",
                    textVerticalAnchor: "top",
                    fontSize: 12,
                    fill: "#fff",
                },
            },
            ports: {...ports},
        },
        true,
    )
    X6.Graph.registerNode(
        'custom-Optional-process',
        {
            inherit: "rect",
            width: 104,
            height: 24,
            markup: [
                {
                    tagName: "rect",
                    selector: "body",
                },
                {
                    tagName: "image",
                },
                {
                    tagName: "text",
                    selector: "label",
                },
            ],
            attrs: {
                body: {
                    stroke: "#E2E2E2",
                    fill: "#fff",
                },
                image: {
                    width: 16,
                    height: 16,
                    refX: 20,
                    refY: 4,
                    'xlink:href': '/workflow/static/templates/zh_CN/static/img/Optional-process.png',
                },
                label: {
                    refX: 40,
                    refY: 7,
                    textAnchor: "left",
                    textVerticalAnchor: "top",
                    fontSize: 12,
                    fill: "#fff",
                },
            },
            ports: {...ports},
        },
        true,
    )
    X6.Graph.registerNode(
        'custom-decision',
        {
            inherit: "rect",
            width: 104,
            height: 24,
            markup: [
                {
                    tagName: "rect",
                    selector: "body",
                },
                {
                    tagName: "image",
                },
                {
                    tagName: "text",
                    selector: "label",
                },
            ],
            attrs: {
                body: {
                    stroke: "#E2E2E2",
                    fill: "#fff",
                },
                image: {
                    width: 16,
                    height: 16,
                    refX: 20,
                    refY: 4,
                    'xlink:href': '/workflow/static/templates/zh_CN/static/img/decision.png',
                },
                label: {
                    refX: 40,
                    refY: 7,
                    textAnchor: "left",
                    textVerticalAnchor: "top",
                    fontSize: 12,
                    fill: "#fff",
                },
            },
            ports: {...ports},
        },
        true,
    )
    X6.Graph.registerNode(
        'custom-data',
        {
            inherit: "rect",
            width: 104,
            height: 24,
            markup: [
                {
                    tagName: "rect",
                    selector: "body",
                },
                {
                    tagName: "image",
                },
                {
                    tagName: "text",
                    selector: "label",
                },
            ],
            attrs: {
                body: {
                    stroke: "#E2E2E2",
                    fill: "#fff",
                },
                image: {
                    width: 16,
                    height: 16,
                    refX: 20,
                    refY: 4,
                    'xlink:href': '/workflow/static/templates/zh_CN/static/img/data.png',
                },
                label: {
                    refX: 40,
                    refY: 7,
                    textAnchor: "left",
                    textVerticalAnchor: "top",
                    fontSize: 12,
                    fill: "#fff",
                },
            },
            ports: {...ports},
        },
        true,
    )
    X6.Graph.registerNode(
        'custom-connect',
        {
            inherit: "rect",
            width: 104,
            height: 24,
            markup: [
                {
                    tagName: "rect",
                    selector: "body",
                },
                {
                    tagName: "image",
                },
                {
                    tagName: "text",
                    selector: "label",
                },
            ],
            attrs: {
                body: {
                    stroke: "#E2E2E2",
                    fill: "#fff",
                },
                image: {
                    width: 16,
                    height: 16,
                    refX: 20,
                    refY: 4,
                    'xlink:href': '/workflow/static/templates/zh_CN/static/img/connect.png',
                },
                label: {
                    refX: 40,
                    refY: 7,
                    textAnchor: "left",
                    textVerticalAnchor: "top",
                    fontSize: 12,
                    fill: "#fff",
                },
            },
            ports: {...ports},
        },
        true,
    )
    const r1 = graph.createNode({
        shape: "custom-start",
        label: "开始",
        data: {
            nodeType: 'start',
        },
    });
    const r2 = graph.createNode({
        shape: "custom-process",
        label: "过程",
        data: {
            nodeType: 'process',
        },
    });
    const r3 = graph.createNode({
        shape: "custom-Optional-process",
        label: "可选过程",
        data: {
            nodeType: 'Optional-process',
        },
    });
    const r4 = graph.createNode({
        shape: "custom-decision",
        label: "决策",
        data: {
            nodeType: 'decision',
        },
    });
    const r5 = graph.createNode({
        shape: "custom-data",
        label: "数据",
        data: {
            nodeType: 'data',
        },

    });
    const r6 = graph.createNode({
        shape: "custom-connect",
        label: "连接",
        data: {
            nodeType: 'connect',
        },
    });

    stencil.load([r1, r2, r3, r4, r5, r6], "group1");
    // #endregion

    //渲染页面
    celldata = [
        {
            id: '',
            x: 800,
            y: 40,
            width: 100,
            height: 40,
            label: '',
            shape: 'custom-start',
            data: {
                nodeType: 'start',
            },
        },
        {
            id: '',
            x: 800,
            y: 120,
            width: 100,
            height: 40,
            label: '',
            shape: 'custom-process',
            data: {
                nodeType: 'process',
            },
        },
        {
            id: '',
            x: 800,
            y: 200,
            width: 100,
            height: 40,
            label: '',
            shape: 'custom-Optional-process',
            data: {
                nodeType: 'Optional-process',
            },
        },
        {
            id: '',
            x: 800,
            y: 280,
            width: 100,
            height: 40,
            label: '',
            shape: 'custom-decision',
            data: {
                nodeType: 'decision',
            },
        },
        {
            id: '',
            x: 800,
            y: 360,
            width: 100,
            height: 40,
            label: '',
            shape: 'custom-data',
            data: {
                nodeType: 'data',
            },
        },

    ]
    node_data = JSON.parse(localStorage.getItem("list") || '[]')
    for (let i = 0; i < celldata.length; i++) {
        celldata[i].id = node_data[i].node_number
        celldata[i].label = node_data[i].node_name
    }
    graph.fromJSON(celldata)

    // js在不刷新页面情况下修改地址栏地址。
    var urlSearch = location.href;

    var unformatStr = changeURLArg(urlSearch, "ttype", 'read');
    if (!!(window.history && history.pushState)) {
        history.replaceState(null, "", unformatStr);
    }

    function changeURLArg(url, arg, arg_val) {
        var pattern = arg + '=([^&]*)';
        var replaceText = arg + '=' + arg_val;
        if (url.match(pattern)) {
            var tmp = '/(' + arg + '=)([^&]*)/gi';
            tmp = url.replace(eval(tmp), replaceText);
            return tmp;
        } else {
            if (url.match('[\?]')) {
                return url + '&' + replaceText;
            } else {
                return url + '?' + replaceText;
            }
        }
    }

    let ProcessCode = document.getElementById('Process-code')
    let buttonName = document.getElementById('button-name')
    /**
     * 当前选中的节点
     * */
    let actionNode;
    let actionEdge;
    let actionCell;
    let flag = null;

    /**
     * 节点点击事件
     * */
    graph.on("node:click", (event) => {
        actionNode = event.node;
        actionCell = event.cell;
        document.getElementsByClassName('show-content')[0].classList.remove('hidden')
        document.getElementsByClassName('deleteNode')[0].classList.remove('btn-disabled')
        document.getElementsByClassName('none')[0].classList.add('hidden')
        document.getElementsByClassName('show-content-line')[0].classList.add('line-hidden')
        if (actionNode?.label === undefined) {
            document.querySelector("#node-name").value = actionNode.getAttrs()?.label.text;
        } else {
            document.querySelector("#node-name").value = actionNode?.label;
        }
        document.querySelector("#node-x").value = actionNode.position().x;
        document.querySelector("#node-y").value = actionNode.position().y;
        document.querySelector("#node-width").value = actionNode.size().width;
        document.querySelector("#node-height").value = actionNode.size().height;

        if (actionCell.getData()?.nodeType === undefined) {
            document.getElementById('nodeType').innerHTML = ''
        } else {
            document.getElementById('nodeType').innerHTML = actionCell.getData()?.nodeType
        }
        if (flag) {
            actionEdge.attr('line/stroke', '#A2B1C3')
            flag = false
        }
        getnodeId()
        let ret_data = {}
        $.ajax({
            url: `/workflow/read_all?model=workflow.node&node_id=${node_id}`,
            // dataType: 'text',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: JSON.stringify(ret_data),
            method: 'POST',
            success: function (result) {
                let res = result.data[0]
                let ss = $('input[name="validation-checkbox"]')
                ProcessCode.value = res.number
                buttonName.value = res.button_name
                ss[0].checked = res.is_leader
                ss[1].checked = res.is_company
                ss[2].checked = res.is_department
                ss[3].checked = res.is_hide
                ss[4].checked = res.is_history
                ss[5].checked = res.is_stop
            },
            error: function () {

            }
        });
    });


    graph.on('node:added', ({node}) => {
        node_data = {
            "workflow_id": JSON.parse(localStorage.getItem("workflow_id")),
            "name": node.label,
            "number": node.id,
            "ttype": 1
        }
        $.ajax({
            url: "/workflow/new",
            // dataType: 'text',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: JSON.stringify(node_data),
            method: 'POST',
            success: function (result) {
                new_cell.push({"node_number": node.id, "node_id": result.data.node_id})
            },
            error: function () {
            }
        });

    })

    //删除按钮 不可选
    function btn_disabled() {
        console.log(document.getElementsByClassName('deleteNode')[0].className.indexOf('btn-disabled') !== -1)
        if (document.getElementsByClassName('deleteNode')[0].className.indexOf('btn-disabled') === -1) {
            document.getElementsByClassName('deleteNode')[0].classList.add('btn-disabled')
        }
    }

    /**
     * 边点击事件
     * */
    graph.on("edge:click", (event) => {
        if (flag) {
            actionEdge.attr('line/stroke', '#A2B1C3')
            document.getElementById('line-label').value = ''
            flag = false
        }
        actionEdge = event.edge;
        actionEdge.attr('line/stroke', ' #3dafe4')
        if (actionEdge.getLabelAt(actionEdge.getZIndex())) {
            document.getElementById('line-label').value = actionEdge.getLabelAt(actionEdge.getZIndex()).attrs.label.text
        }

        flag = true
        document.getElementsByClassName('show-content')[0].classList.add('hidden')
        document.getElementsByClassName('show-content-line')[0].classList.remove('line-hidden')
        document.getElementsByClassName('deleteNode')[0].classList.remove('btn-disabled')
        document.getElementsByClassName('none')[0].classList.add('hidden')
        // graph.getCellById(actionEdge.id)  获取选中的节点Id
    });

    //删除
    function deleteNode() {
        if (actionNode) {
            graph.removeNode(actionNode.id);
        }
        if (actionEdge) {
            graph.removeEdge(actionEdge.id);
        }

        if (actionNode || actionEdge) {
            document.getElementsByClassName('none')[0].classList.remove('hidden')
            document.getElementsByClassName('show-content')[0].classList.add('hidden')
            document.getElementsByClassName('show-content-line')[0].classList.add('line-hidden')
            document.getElementsByClassName('deleteNode')[0].classList.add('btn-disabled')
        }
    }

    //清空画布
    function clearCell() {
        graph.clearCells(true);
        if (actionNode || actionEdge) {
            document.getElementsByClassName('none')[0].classList.remove('hidden')
            document.getElementsByClassName('show-content')[0].classList.add('hidden')
            document.getElementsByClassName('show-content-line')[0].classList.add('line-hidden')
        }
        btn_disabled()
    }

    /**
     * 空白画布点击事件
     * */
    graph.on('blank:click', () => {
        if (flag) {
            actionEdge.attr('line/stroke', '#A2B1C3')
            flag = false
        }
        actionNode = null;
        actionEdge = null;
        document.getElementsByClassName('none')[0].classList.remove('hidden')
        document.getElementsByClassName('show-content')[0].classList.add('hidden')
        document.getElementsByClassName('show-content-line')[0].classList.add('line-hidden')
        document.getElementsByClassName('deleteNode')[0].classList.add('btn-disabled')

    })
    /**
     * 监听输入框修改事件
     * */
    document.querySelector("#node-name").addEventListener("input", (e) => {
        actionNode.label = document.getElementById('node-name').value;
    });
    /**
     * x
     * */
    document.querySelector("#node-x").addEventListener("input", (e) => {
        actionNode.position(Number(document.getElementById('node-x').value), Number(document.getElementById('node-y').value), {silent: false})
    });
    /**
     * y
     * */
    document.querySelector("#node-y").addEventListener("input", (e) => {
        actionNode.position(Number(document.getElementById('node-x').value), Number(document.getElementById('node-y').value), {silent: false})
    });
    /**
     * width
     * */
    document.querySelector("#node-width").addEventListener("input", (e) => {
        actionNode.size(document.getElementById('node-width').value, document.getElementById('node-height').value, {silent: true})
    });
    /**
     * height
     * */
    document.querySelector("#node-height").addEventListener("input", (e) => {
        actionNode.size(document.getElementById('node-width').value, document.getElementById('node-height').value, {silent: true})
    });

    /**
     * line-label
     * */
    document.querySelector("#line-label").addEventListener("input", (e) => {
        actionEdge.setLabels([{
            attrs: {label: {text: document.getElementById('line-label').value}},
        }])

    });
    /**
     * 流程名称
     * */
    document.querySelector("#process-name").addEventListener("input", (e) => {
        document.getElementById('chat-title').innerText = document.getElementById('process-name').value
    });
    //获取标题
    document.getElementById('process-name').value = document.getElementById('chat-title').innerText

    //导出图形数据
    function getJson() {
        setTimeout(() => {
            document.getElementById('json-getdata').value = JSON.stringify(graph.toJSON({diff: true}));
        }, 300);

    }

    //导入图形数据
    function pushJson() {
        if (document.getElementById('json-pushdata').value !== '') {
            graph.fromJSON(JSON.parse(document.getElementById('json-pushdata').value))
            document.getElementById('pushjson-btn').dataset.dismiss = 'modal';

        } else {
            var msg = '请填写图形数据';
            var title = '';
            var type = 'warning';

            toastr[type](msg, title, {
                positionClass: 'toast-top-full-width',
                rtl: $('body').attr('dir') === 'rtl' || $('html').attr('dir') === 'rtl'
            });
        }

    }

    graph.history.on("change", () => {
        canUndo = graph.history.canUndo();
        canRedo = graph.history.canRedo();
        showBtn();
    });

    //还原-撤销------显示/隐藏
    function showBtn() {
        if (canUndo === false) {
            document.getElementsByClassName("onUndo")[0].disabled = "true";
            document.getElementsByClassName('onUndo')[0].classList.add('btn-disabled')
        } else {
            $(".onUndo").removeAttr("disabled");
            document.getElementsByClassName('onUndo')[0].classList.remove('btn-disabled')
        }
        if (canRedo === false) {
            document.getElementsByClassName("onRedo")[0].disabled = "true";
            document.getElementsByClassName('onRedo')[0].classList.add('btn-disabled')
        } else {
            $(".onRedo").removeAttr("disabled");
            document.getElementsByClassName('onRedo')[0].classList.remove('btn-disabled')

        }

    }

    showBtn();

    //撤销
    function onUndo() {
        graph.undo();
        graph.history.canUndo();
        if (actionNode || actionEdge) {
            document.getElementsByClassName('none')[0].classList.remove('hidden')
            document.getElementsByClassName('show-content')[0].classList.add('hidden')
        }
    }

    //还原
    function onRedo() {
        graph.redo();
        graph.history.canRedo();
        if (actionNode || actionEdge) {
            document.getElementsByClassName('none')[0].classList.remove('hidden')
            document.getElementsByClassName('show-content')[0].classList.add('hidden')
        }
    }

    // 放大
    function enlarge() {
        graph.zoom(0.2)

    }

    //缩小
    function narrow() {
        graph.zoom(-0.2)
    }

    //居中
    function intersect() {
        graph.centerContent()
    }

    /*
    **运行动效svg
    **/
    // 找到图里面的起始点
    function onRun() {
        graph.getNodes().filter((node) => {
            const data = node.getData();
            if (data.nodeType === 'start') {
                graph.trigger('signal', node) //触发一个事件
            }
        })
    }

    //节点高亮
    function flash(cell) {
        const cellView = graph.findViewByCell(cell)
        if (cellView) {
            cellView.highlight()
            setTimeout(() => cellView.unhighlight(), 300)
        }
    }

    //接收到上面触发的事件,
    graph.on('signal', (cell) => {
        if (cell.isEdge()) { //如果是边的话,就触发动画
            const view = graph.findViewByCell(cell)
            if (view) {
                const token = X6.Vector.create('circle', {r: 6, fill: '#feb662'})
                const target = cell.getTargetCell()
                setTimeout(() => {
                    view.sendToken(token.node, 1000, () => {
                        if (target) {
                            graph.trigger('signal', target)
                        }
                    })
                }, 300)
            }
        } else {
            flash(cell)  //如果是点的话,就继续向下找,然后触发.
            const edges = graph.model.getConnectedEdges(cell, {
                outgoing: true,
            })
            edges.forEach((edge) => graph.trigger('signal', edge))     //找相连的所有边
        }
    })

    //框选
    function boxSelection() {
        if (graph.isSelectionEnabled()) {
            document.getElementById('box-Selection').classList.remove('box-shadow')
            graph.enablePanning() //启用平移画布
            graph.disableSelection() //禁止框选
        } else {
            document.getElementById('box-Selection').classList.add('box-shadow')
            graph.disablePanning() //禁止平移画布
            graph.enableSelection() //启用框选
        }

    }

    let cellData
    let boxX
    let boxY

    //新建群组
    function groupList() {
        //获取 x ,y size
        let selection = document.getElementsByClassName('x6-widget-selection')[0]
        const parent = graph.addNode({
            x: boxX,
            y: boxY,
            width: Number(selection?.style.width.replace('px', '')),
            height: Number(selection?.style.height.replace('px', '')),
            zIndex: 0,
            attrs: {
                body: {
                    fill: 'rgba(243,249,255,.6)', // 背景颜色
                    stroke: '#1890ff',  // 边框颜色
                },

                label: {
                    refX: 30,
                    refY: 15,
                    fontSize: 12,
                    text: '新建群组',    // 文本
                },
            },
        })
        for (let i = 0; i < cellData.length; i++) {
            parent.addChild(cellData[i])
        }
        document.getElementsByClassName('newGroup')[0].classList.add('btn-disabled')
    }

    //获取选中的节点和线
    graph.on('cell:selected', (args) => {
        cellData = graph.getSelectedCells()
        for (let i = 0; i < cellData.length; i++) {
            if (!cellData[i].hasParent() && !cellData[i].getChildren()?.length > 0) {

                document.getElementsByClassName('newGroup')[0].classList.remove('btn-disabled')
            }
        }
    })
    //获取选框的坐标
    graph.on('blank:mousedown', ({e, x, y}) => {
        boxX = x
        boxY = y
    })

    //解散群组
    function dissolutionGroup() {
        actionNode.eachChild((item => {
            item.setParent(null)
        }))
        actionNode.setChildren(null)
        graph.removeNode(actionNode.id);
        // actionNode.setParent(null)
    }

    //节点闪烁
    function star() {
        graph.getNodes().filter((node) => {
            const data = node.getData();
            if (data.nodeType === 'start') {
                const view1 = graph.findView(node)
                if (view1) {
                    view1.animate('rect', {
                        attributeType: 'CSS',
                        attributeName: 'fill',
                        from: 'red',
                        to: 'green',
                        dur: '1s',
                        repeatCount: 'indefinite',
                    })
                }
            }
        })
    }

    //全屏
    function fullScreen() {
        document.getElementsByClassName('full-screen')[0].classList.add('hidden')
        document.getElementsByClassName('exit-screen')[0].classList.remove('hidden')
        var docElm = document.documentElement;
        if (docElm.requestFullscreen) {
            docElm.requestFullscreen();
        }
        //FireFox
        else if (docElm.mozRequestFullScreen) {
            docElm.mozRequestFullScreen();
        }
        //Chrome等
        else if (docElm.webkitRequestFullScreen) {
            docElm.webkitRequestFullScreen();
        }
        //IE11
        else if (docElm.msRequestFullscreen) {
            document.body.msRequestFullscreen();
        }
    }

    //退出全屏
    function exitScreen() {
        document.getElementsByClassName('exit-screen')[0].classList.add('hidden')
        document.getElementsByClassName('full-screen')[0].classList.remove('hidden')
        if (document.exitFullscreen) {
            document.exitFullscreen();
        } else if (document.msExitFullscreen) {
            document.msExitFullscreen();
        } else if (document.mozCancelFullScreen) {
            document.mozCancelFullScreen();
        } else if (document.webkitCancelFullScreen) {
            document.webkitCancelFullScreen();
        } else {
            window.parent.showTopBottom();
        }
    }

    //展开--收起--左侧--右侧--底部
    function openStow(iconName) {
        let iconbox = document.getElementsByClassName(iconName)[0]
        if (iconbox.className.indexOf('green') !== -1) {
            iconbox.classList.remove('green')
            //左边
            if (iconName === 'icon-zuobian') {
                document.getElementById('stencil').classList.add('box-none')
                setTimeout(() => {
                    document.getElementById('stencil').classList.remove('box-none')
                    document.getElementById('stencil').classList.remove('box-transform-left')
                }, 100)
            }
            //右边
            if (iconName === 'icon-youbian1') {
                document.getElementById('node-attribute').classList.add('box-none')
                setTimeout(() => {
                    document.getElementById('node-attribute').classList.remove('box-none')
                    document.getElementById('node-attribute').classList.remove('box-transform-right')
                }, 100)
            }
            //底部
            if (iconName === 'icon-dibu2') {
                document.getElementsByClassName('bottom-list')[0].classList.add('box-none')
                setTimeout(() => {
                    document.getElementsByClassName('bottom-list')[0].classList.remove('box-none')
                    document.getElementsByClassName('bottom-list')[0].classList.remove('box-transform-bottom')
                }, 100)
            }
        } else {
            iconbox.classList.add('green')
            //左边
            if (iconName === 'icon-zuobian') {
                document.getElementById('stencil').classList.add('box-transform-left')

            }
            //右边
            if (iconName === 'icon-youbian1') {
                document.getElementById('node-attribute').classList.add('box-transform-right')

            }
            //底部
            if (iconName === 'icon-dibu2') {
                document.getElementsByClassName('bottom-list')[0].classList.add('box-transform-bottom')

            }
        }
    }

    //保存
    function holdJson() {
        let cells = {
            node: [],
            edge: []
        }

        let jsonList = graph.toJSON({diff: true})

        jsonList.cells.forEach(item => {
            item['node_number'] = item.id
            delete item.id
            if (item.shape === 'edge') {
                cells.edge.push(item)
            } else {
                cells.node.push(item)
            }
        })
        let list = JSON.parse(localStorage.getItem("list"))
        for (let i = 0; i < list.length; i++) {
            for (let j = 0; j < cells.edge.length; j++) {
                if (list[i].node_number === cells.edge[j]?.source.cell) {
                    cells.edge[j].source.node_id = list[i].node_id
                }
                if (list[i].node_number === cells.edge[j]?.target.cell) {
                    cells.edge[j].target.node_id = list[i].node_id
                }
            }
        }

        for (let i = 0; i < new_cell.length; i++) {
            for (let j = 0; j < cells.edge.length; j++) {
                if (new_cell[i].node_number === cells.edge[j]?.source.cell) {
                    cells.edge[j].source.node_id = new_cell[i].node_id
                }
                if (new_cell[i].node_number === cells.edge[j]?.target.cell) {
                    cells.edge[j].target.node_id = new_cell[i].node_id
                }
            }
        }
        let json_data = {
            "ttype": 4,
            "workflow_id": JSON.parse(localStorage.getItem("workflow_id")),
        }
        json_data.workflow_list = cells
        //
        $.ajax({
            url: "/workflow/new",
            // dataType: 'text',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: JSON.stringify(json_data),
            method: 'POST',
            success: function (result) {
                if (result.code === 1) {
                    let msg = '保存成功';
                    let title = '';
                    let type = 'success';
                    toastr[type](msg, title, {
                        positionClass: 'toast-top-full-width',
                        rtl: $('body').attr('dir') === 'rtl' || $('html').attr('dir') === 'rtl'
                    });
                }
            },
            error: function () {
            }
        });
    }

    //预览   --svg格式
    function previewSVG() {
        intersect()
        graph.toSVG(dataUri => {
            localStorage.setItem("dataUri", dataUri);
            window.open(`/workflow/preview`, '_blank');

            // X6.DataUri.downloadDataUri(X6.DataUri.svgToDataUrl(dataUri), 'chart.svg')
        }, {
            preserveDimensions: true
            // preserveDimensions: {
            //     width: 1000,
            //     height: 800,
            // }
        })
    }


    function getnodeId() {
        let list = JSON.parse(localStorage.getItem("list"))
        for (let i = 0; i < list.length; i++) {
            if (list[i].node_number === actionNode.id) {
                node_id = list[i].node_id
            }
        }
        for (let i = 0; i < new_cell.length; i++) {
            if (list[i].node_number === actionNode.id) {
                node_id = list[i].node_id
            }
        }
    }

    // let selectData = [{id: 0, text: 'story'}, {id: 1, text: 'bug'}, {id: 2, text: 'task'}, {id: 3, text: 'task3'}, {
    //     id: 4,
    //     text: 'task4'
    // }, {id: 5, text: 'task5'}, {id: 6, text: 'task6'}]

    $('#Permission-group').hide()
    $('#Fixed-approver').hide()
    console.log(1111)
    console.log($('input[name="radios-example"]'),'123456')
    $('input[name="radios-example"]').click(function () {
        console.log(1111)
        let URL = ''
        if ($(this).val() === "权限组") {
            URL = `/workflow/selection?model=res.groups&node_id=${node_id}`
            $('#Permission-group').show()
            $('#Fixed-approver').hide()
            $('#Customization').hide()
        } else if ($(this).val() === "固定审核人") {
            URL = `/workflow/selection?model=res.users&node_id=${node_id}`
            $('#Permission-group').hide()
            $('#Fixed-approver').show()
            $('#Customization').hide()
        } else {
            $('#Permission-group').hide()
            $('#Fixed-approver').hide()
            $('#Customization').show()
        }

        $.ajax({
            url: URL,
            // dataType: 'text',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            data: JSON.stringify(data),
            method: 'POST',
            success: function (result) {
                let selectData = result.result
                if (URL.indexOf('res.groups') !== -1) {
                    $('select[name="validation-select2-multi"]').select2({
                        placeholder: 'Select gear...++++',
                        data: selectData
                    })
                } else if (URL.indexOf('res.users') !== -1) {
                    $('select[name="validation-select2-multi-2"]').select2({
                        placeholder: 'Select gear...++++',
                        data: selectData
                    })
                }
            },
            error: function () {
            }
        });

    });

    //获取选中的值
    function getselect() {
        let superiorValue = document.getElementById('superiorValue').value
    }

    // 渲染下拉框数据
    let str = ''
    let data1 = [{"id": 1, "name": 'Select state'}, {"id": 2, "name": 'California'}, {"id": 3, "name": 'Hawaii'}]
    let superiorValue = document.getElementById('superiorValue')
    for (let i = 0; i < data1.length; i++) {
        str += `<option value="${data1[i].id}">${data1[i].name}</option>`

    }
    superiorValue.innerHTML = str
    //获取check的值
    let checkData = []
    $('input[name="validation-checkbox"]').click(function () {
        checkData.length = 0
        $('input[name="validation-checkbox"]:checked').each(function () {
            checkData.push($(this).val())
            console.log(checkData, '23456y')
        })
    })

</script>
</body>

</html>